<template>
    <div class="icons">

        <swiper :options="swiperOption">
            <!--第一个循环就是控制分页-->
            <swiper-slide v-for="(page, index) of pages" :key="index">
                <div class="icon" v-for="value of page" :key="value.id">
                  <div class="icon-img">
                    <img class="icon-img-content" :src='value.imgUrl' >
                  </div>
                  <p class="icon-desc">{{value.desc}}</p>
                </div>
            </swiper-slide>
        </swiper>



    </div>
</template>

<script>
  export default {
      name: 'HomeIcons',
      props: {
        iconList: Array
      },
      data: function () {
          return {
              swiperOption: {
                //是否自动轮播
                autoplay: false
              },
              /*iconList:[
                {
                  id: '0001',
                  imgUrl: 'https://s.qunarzz.com/homenode/images/touchheader/hotel.png',
                  desc: '热门资源'
                },
                {
                  id: '0002',
                  imgUrl: 'https://s.qunarzz.com/homenode/images/touchheader/flight.png',
                  desc: '最新资源'
                },
                {
                  id: '0003',
                  imgUrl: 'https://s.qunarzz.com/homenode/images/touchheader/train.png',
                  desc: '高清资源'
                },
                {
                  id: '0004',
                  imgUrl: 'https://s.qunarzz.com/homenode/images/touchheader/package.png',
                  desc: '热带雨林'
                },
                {
                  id: '0005',
                  imgUrl: 'https://s.qunarzz.com/homenode/images/touchheader/piao.png',
                  desc: '风俗景点'
                },
                {
                  id: '0006',
                  imgUrl: 'https://picbed.qunarzz.com/f5e5770393d759578962e53ee67798c8.png',
                  desc: '海外高清'
                },
                {
                  id: '0007',
                  imgUrl: 'https://picbed.qunarzz.com/a36d2288f19e54562338f4d8ef986288.png',
                  desc: '特价资源'
                },
                {
                  id: '0008',
                  imgUrl: 'https://picbed.qunarzz.com/377db8cb2143aebf01869c9baad3d325.png',
                  desc: '开车宝典'
                },
                {
                  id: '0009',
                  imgUrl: 'https://picbed.qunarzz.com/1316dc82d1ce6259686d5a68880e5a9d.png',
                  desc: '星级酒店'
                },
              ]*/
          }
      },
      //计算属性，该数据根据其他数据来获得
      computed: {
          pages() {
              const pages = [];
              this.iconList.forEach((value, index) => {
                  //解决页码问题，可以看到多余的标签,这里的主要作用是将数组拆分成分页，每页显示8条数据
                  const page = Math.floor(index / 8);
                  if (!pages[page]){
                      pages[page] = []
                  }
                  pages[page].push(value)
              });
              return pages;
          }
      }

  }
</script>

<style scoped lang="stylus">

  @import "~styles/varibles.styl"
  @import "~styles/mixins.styl"

  /*最外层的最宽高的占比*/
  .icons >>> .swiper-container
    height: 0
    padding-bottom: 50%
  .icons
    margin-top: .1rem
    .icon
      position: relative
      overflow: hidden
      float: left
      width: 25%
      height: 0
      padding-bottom: 25%
      .icon-img
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: .44rem
        box-sizing: border-box
        padding: .1rem
        .icon-img-content
          width: 60%
          display: block
          margin: 0 auto
      .icon-desc
        position: absolute
        left: 0
        right: 0
        bottom: .44rem
        height: .40rem
        color: $darkTextColor
        line-height: .50rem
        text-align: center
        /* 复用mixins.styl里的样式*/
        ellipse()
</style>
